<template>
  <div :class="id == null ? 'app-container' : null">
    <el-form
      class="form-data"
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      v-loading="loading"
    >
      <el-row>
        <el-col :span="12">
          <el-row>
            <el-col :span="12" v-if="id">
              <el-form-item label="自编码" prop="account">
                <el-input
                  v-model="form.account"
                  placeholder="请输入自编码"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="游戏名称" prop="gameId">
                <el-select
                  v-model="form.gameId"
                  @change="selectGameType"
                  placeholder="请选择游戏名称"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in gameList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="交易方式" prop="trading">
                <el-cascader
                  v-model="form.trading"
                  :options="tradingList"
                  :props="{
                    value: 'dictValue',
                    label: 'dictLabel',
                    emitPath: false,
                  }"
                  placeholder="请选择交易方式"
                  style="width: 100%"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="回收渠道" prop="recoveryChannel">
                <el-cascader
                  v-model="form.recoveryChannel"
                  :options="recoveryChannelList"
                  :props="{
                    value: 'dictValue',
                    label: 'dictLabel',
                    emitPath: false,
                  }"
                  placeholder="请选择回收渠道"
                  style="width: 100%"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="游戏账号" prop="accountNumber">
                <el-input
                  v-model="form.accountNumber"
                  placeholder="请输入游戏账号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="回收价格" prop="recoveryPrice">
                <el-input-number
                  v-model="form.recoveryPrice"
                  placeholder="请输入回收价格"
                  :controls="false"
                  :disabled="id != null"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="厂商类型" prop="clientType">
                <el-select
                  v-model="form.clientType"
                  placeholder="请选择厂商类型"
                  :disabled="form.gameId === null"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in carrierList"
                    :key="dict.id"
                    :label="dict.fieldName"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付方式" prop="payType">
                <el-select
                  v-model="form.payType"
                  placeholder="请选择支付方式"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in dict.type.sys_pay_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号密码" prop="accountPassword">
                <el-input
                  v-model="form.accountPassword"
                  placeholder="请输入账号密码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="绑定号码" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入绑定号码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="换绑人" prop="changeUserId">
                <el-select
                  v-model="form.changeUserId"
                  placeholder="请选择换绑人"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in allUsers"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="号主姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入号主姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="号主电话" prop="numbers">
                <el-input v-model="form.numbers" placeholder="请输入号主电话" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="回收单号" prop="cipher">
                <el-input v-model="form.cipher" placeholder="请输入回收单号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="平台昵称" prop="nickName">
                <el-input
                  v-model="form.nickName"
                  placeholder="请输入平台昵称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否埋Q" prop="isFriend">
                <el-select
                  v-model="form.isFriend"
                  placeholder="请选择是否埋Q"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="回收人" prop="userId">
                <el-select
                  v-model="form.userId"
                  placeholder="请选择回收人"
                  style="width: 100%"
                  :disabled="id != null"
                >
                  <el-option
                    v-for="item in allUsers"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签署合同" prop="contract">
                <el-select
                  v-model="form.contract"
                  placeholder="是否签署合同"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in dict.type.sys_contract_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登录设备" prop="recoveryDevice">
                <el-cascader
                  v-model="form.recoveryDevice"
                  :options="recoveryDeviceList"
                  :props="{
                    value: 'dictValue',
                    label: 'dictLabel',
                    emitPath: false,
                  }"
                  placeholder="请选择登录设备"
                  style="width: 100%"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="id">
              <el-form-item label="换绑状态" prop="rebindingType">
                <el-select
                  v-model="form.rebindingType"
                  placeholder="请选择换绑状态"
                  :disabled="id != null"
                  style="width: 100%"
                >
                  <el-option label="请选择字典生成" value="" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="id">
              <el-form-item label="销售" prop="saleStatus">
                <el-select
                  v-model="form.saleStatus"
                  placeholder="请选择是否销售"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="id">
              <el-form-item label="售后" prop="aftermarket">
                <el-select
                  v-model="form.aftermarket"
                  placeholder="请选择是否售后"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="id">
              <el-form-item label="查找回" prop="finds">
                <el-select
                  v-model="form.finds"
                  placeholder="请选择查找回"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in dict.type.sys_recovery_finds"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="id">
              <el-form-item label="查冻结" prop="freeze">
                <el-select
                  v-model="form.freeze"
                  placeholder="请选择查冻结"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in dict.type.sys_recovery_freeze"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款截图" prop="payImg">
            <ImageUpload
              v-model="form.payImg"
              size="mini"
              :isShowTip="false"
            ></ImageUpload>
          </el-form-item>
          <el-form-item label="防沉迷截图" prop="antiAddictionImg">
            <ImageUpload
              v-model="form.antiAddictionImg"
              size="mini"
              :isShowTip="false"
            ></ImageUpload>
          </el-form-item>
          <el-form-item label="QQ钱包截图" prop="qqWalletImg">
            <ImageUpload
              v-model="form.qqWalletImg"
              size="mini"
              :isShowTip="false"
            ></ImageUpload>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              v-model="form.remark"
              :rows="8"
              maxlength="200"
              show-word-limit
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider></el-divider>
    <div slot="footer" class="dialog-footer">
      <div style="flex: 1">
        <el-button @click="handleSetting" v-if="id == null">回收配置</el-button>
      </div>
      <div style="padding: 0 20px; line-height: 36px" v-if="id == null">
        当前操作人: {{ $store.getters.nickName }}
      </div>
      <div>
        <el-button type="primary" @click="submitForm">{{
          id ? "确 定" : "提交数据"
        }}</el-button>
        <el-button @click="cancel" v-if="id">取消</el-button>
        <el-button type="primary" @click="cancel" v-else plain
          >手动上架</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import recoveryInfoApi from "@/api/zyl/recovery/recoveryInfo";
import gameListApi from "@/api/gameConfig/gameList";
import gameDictionaryApi from "@/api/gameConfig/gameDictionary";
import supplyConfigApi from "@/api/system/supplyConfig";
import { getDictTree } from "@/api/system/dict/tree";

export default {
  name: "RecoveryInfoInfo",
  dicts: [
    "sys_inventory_status",
    "sys_recovery_search",
    "sys_yes_no",
    "sys_account_label",
    "sys_account_from",
    "sys_autoscreenshot_status",
    "sys_rebinding_type",
    "sys_client_type",
    "sys_contract_status",
    "sys_revier_status",
    "sys_pay_type",
    "sys_recovery_finds",
    "sys_recovery_freeze",
  ],
  props: {
    id: null,
    type: Number,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        gameId: [
          { required: true, message: "游戏名称不能为空", trigger: "blur" },
        ],
        trading: [
          { required: true, message: "交易方式不能为空", trigger: "blur" },
        ],
        recoveryChannel: [
          { required: true, message: "回收渠道不能为空", trigger: "blur" },
        ],
        accountNumber: [
          { required: true, message: "游戏账号不能为空", trigger: "change" },
        ],
        recoveryPrice: [
          { required: true, message: "回收价格不能为空", trigger: "change" },
        ],
        clientType: [
          { required: true, message: "厂商类型不能为空", trigger: "blur" },
        ],
        accountPassword: [
          { required: true, message: "账号密码不能为空", trigger: "change" },
        ],
        phone: [
          { required: true, message: "绑定号码不能为空", trigger: "blur" },
        ],
        changeUserId: [
          { required: true, message: "换绑人不能为空", trigger: "blur" },
        ],
        userId: [
          { required: true, message: "回收人不能为空", trigger: "blur" },
        ],
      },
      gameList: [], // 游戏
      sysList: [], // 系统
      carrierList: [], //运营商列表
      areaList: [], //大区列表
      serverList: [], //服务器列表
      GameSelectedType: null, //游戏类型
      allUsers: [], //用户列表
      recoveryChannelList: [], //回收渠道列表
      tradingList: [], //交易方式列表
      recoveryDeviceList: [], //登录设备列表
      createTimeHover: false, //鼠标悬停创建时间上
      rebindingTimeHover: false, //鼠标悬停换绑时间上
      activeTab: "recoveryData",
    };
  },
  created() {
    this.getGameList();
    this.getAllUserList();
    this.getRecoveryChannel();
    this.getTrading();
    this.getRecoveryDevice();
  },
  inject: ["closefn"],
  methods: {
    // 取消按钮
    cancel() {
      this.reset();
      this.closefn();
      this.$parent.recoveryData = "recoveryData";
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        remark: null,
        account: null,
        gameId: null,
        systemId: null,
        trading: null,
        recoveryChannel: null,
        accountNumber: null,
        accountPassword: null,
        recoveryPrice: undefined,
        clientType: null,
        payType: null,
        saleMoney: null,
        phone: null,
        changeUserId: null,
        name: null,
        numbers: null,
        cipher: null,
        nickName: null,
        isFriend: null,
        userId: null,
        contract: null,
        retrieve: null,
        payImg: null,
        antiAddictionImg: null,
        qqWalletImg: null,
        accountImg: null,
        descs: null,
        labelsId: null,
        rebindingTime: null,
        rebindingType: null,
        recoveryDevice: null,
        isAutomatic: null,
        reviewStatus: null,
        accountLabel: null,
        saleUserId: null,
        finds: null,
        freeze: null,
        freezeTime: null,
        sale: null,
        saleStatus: null,
        aftermarket: null,
      };
      this.resetForm("form");
    },

    /** 修改按钮操作 */
    handleUpdate(id) {
      this.reset();
      this.loading = true;
      recoveryInfoApi.getRecoveryInfo(id).then((response) => {
        this.form = response.data;
        this.loading = false;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            recoveryInfoApi.updateRecoveryInfo(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
            });
          } else {
            recoveryInfoApi.addRecoveryInfo(this.form).then((response) => {
              // this.reset()
              this.$modal.msgSuccess("新增成功");
              this.open = false;
            });
          }
        }
      });
    },
    // 游戏列表
    getGameList() {
      gameListApi.getGameList().then((res) => {
        this.gameList = res.rows;
      });
    },
    selectGameType(val) {
      if (!val) {
        val = null;
        this.sysList = [];
        this.carrierList = [];
        this.areaList = [];
        this.form.clientType = null;
        return;
      }
      this.gameList.forEach((r) => {
        if (r.id == val) {
          this.GameSelectedType = r.type;
        }
      });
      if (this.GameSelectedType === 0) {
        // 手游
        // 获取系统列表和运营商列表
        this.getSysList();
        this.getYysList();
      } else {
        // 端游
        // 获取大区列表
        this.getAreaList2();
      }
    },
    // 获取系统列表
    getSysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.form.gameId,
          systemKey: "system",
        })
        .then((res) => {
          this.sysList = res.rows;
        });
    },
    // 获取运营商列表
    getYysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.form.gameId,
          systemKey: "carrier",
        })
        .then((res) => {
          this.carrierList = res.rows;
        });
    },
    // 运营商改变  获取大区列表
    getAreaList(e) {
      this.search();
      let obj = {
        gameId: this.form.gameId,
        systemKey: "group",
      };
      this.form.groupId = "";
      this.form.serverId = "";

      // 运营商改变 找出选择的运营商的对象
      if (e) {
        this.carrierList.forEach((i) => {
          if (i.id == e) {
            obj.systemKey = i.systemKey + "group";
          }
        });
      }
      gameDictionaryApi.getChildList(obj).then((res) => {
        this.areaList = res.rows;
      });
    },
    // 大区改变  获取服务器列表
    getServiceList(e) {
      this.search();
      this.form.serverId = "";

      if (e) {
        gameDictionaryApi
          .getList({
            parentId: e,
          })
          .then((res) => {
            this.serverList = res.rows;
          });
      } else {
        this.serverList = [];
      }
    },
    //端游 直接获取大区
    getAreaList2() {
      let obj = {
        gameId: this.form.gameId,
        systemKey: "group",
      };
      gameDictionaryApi.getChildList(obj).then((res) => {
        this.areaList = res.rows;
      });
    },
    getAllUserList() {
      supplyConfigApi.getAllUserList().then((res) => {
        this.allUsers = res.rows;
      });
    },
    getRecoveryChannel() {
      getDictTree("sys_recovery_channel").then((res) => {
        this.recoveryChannelList = res.data;
      });
    },
    getTrading() {
      getDictTree("sys_trading").then((res) => {
        this.tradingList = res.data;
      });
    },
    getRecoveryDevice() {
      getDictTree("sys_recovery_device").then((res) => {
        this.recoveryDeviceList = res.data;
      });
    },
    handleSetting() {},
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          console.log(val);
          this.handleUpdate(val);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
.form-data {
  height: calc(100vh - 310px);
  overflow: auto;
}
.dialog-footer {
  display: flex;
}
</style>
